import React, { Component } from 'react'

export default class App extends Component {

    // es6 类组件中，在构造函数中定义初始状态
    // 一样要在 constructor 里面先调用 super
    // super: 用来 继承父类的属性和方法用的
    constructor(props) {
        // 继承父类的属性和方法用的
        super(props)

        // 这里定义的数据就是我们的响应式数据，组件的初始数据
        this.state = {
            msg: '你笑起来真好看'
        }
    }

    render() {
        return (
            <>
                <div>App -- {this.state.msg}</div>
                <button onClick={() => {

                    // this.setState 是我们唯一修改数据的方法
                    // 该方法需要传递一个对象就行值的修改
                    // 也可以传递一个函数进行修改值
                    // this.setState({
                    //     msg: '像夏天的太阳'
                    // }, () => {
                    //     // 内容修改成功之后的回调函数
                    // })


                    this.setState((prevState, props) => {
                        // prevState: 获取上一次 state 中的属性值
                        // props: 父组件传递过来的属性
                        console.log(prevState, props);

                        // return 出去的内容就是我们要修改的内容
                        return {
                            msg: '啊哈哈哈哈哈哈哈哈哈哈哈'
                        }
                    })
                }}>求点击</button>
            </>
        )
    }
}
